<template>
    <u-row class="pa-4px">
        <v-card v-if="user.imgs.length" @click="change(user)">
            <!--显示是否为多图，然后自己可以看都谁看过，不要有谁看过这个功能的好还是-->
            <v-img :src="$imgUrl+user.imgs[0].img" max-height="300">

                <!--                                <v-chip label>Label</v-chip>-->
                <!--                                <v-icon color="white" light>photo_library</v-icon>-->
                <v-layout justify-end v-if="user.certified">
                    <v-btn depressed class="size22 mt-1 mr-2" color="light-blue lighten-2" fab dark
                           @click.stop="$alert('照片已认证')">
                        <v-icon size="30">mdi-alpha-v</v-icon>
                    </v-btn>
                </v-layout>
            </v-img>
            <v-card-actions>
                <span class="subtitle-1" :class="{'error--text':user.vipFlag}">{{user.nickname}}</span>
                <v-chip
                        v-if="user.vipFlag"
                        color="warning"
                        class="white--text py-0 px-1 ml-1 font-small"
                        label
                        x-small
                >
                    VIP
                </v-chip>
                <v-chip
                        v-if="user.yearVipFlag"
                        color="error"
                        class="white--text py-0 px-1 ml-1 font-small"
                        label
                        x-small
                >
                    年
                </v-chip>
                <v-spacer></v-spacer>
                <!--<v-icon dark color="success">
                    trip_origin
                </v-icon>-->
                <v-menu offset-y>
                    <template v-slot:activator="{ on }">
                        <v-btn class="px-0" icon @click.stop="" v-on="on" x-small color="secondary">
                            <v-icon>more_vert</v-icon>
                        </v-btn>
                    </template>
                    <v-list class="py-0">
                        <v-list-item>
                            <v-list-item-title @click.stop="reportMatchUser">举报</v-list-item-title>
                        </v-list-item>
                        <v-list-item>
                            <v-list-item-title>关闭</v-list-item-title>
                        </v-list-item>
                    </v-list>
                </v-menu>
            </v-card-actions>
            <v-card-actions class="pt-0">
                <v-chip
                        :color="user.genderColor"
                        class="white--text px-2 font-tiny"
                        label
                        x-small
                >
                    <v-icon class="mr-1 font-tiny">{{user.genderIcon}}</v-icon>
                    {{user.age}}
                </v-chip>
                <v-chip class="font-tiny ml-1" x-small label color="success" text-color="white">
                    {{user.faceRatio}}分
                </v-chip>
            </v-card-actions>
            <v-card-actions class="pt-0">
                <v-icon small :color="user.onlineColor">lens</v-icon>
                <span v-if="user.onlineFlag" class="grey--text ml-3px">在线</span>
                <span v-else class="grey--text ml-3px">{{user.lastOnlineDate|formatTime}}</span>
                <v-spacer></v-spacer>
                <!--<span class="grey--text">0.45km</span>-->
                <span class="grey--text">{{user.location}}</span>
            </v-card-actions>
        </v-card>


        <v-dialog
                v-model="dialogVisible" v-if="user"
                width="500"
        >

            <v-card>
                <v-card-title
                        class="headline grey lighten-2"
                        primary-title
                >
                    举报
                </v-card-title>
                <v-card-text>
                    <v-radio-group v-model="reportType">
                        <v-radio
                                v-for="item in reportTypes"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value"
                        ></v-radio>
                    </v-radio-group>
                    <v-textarea
                            v-model="content"
                            label="备注"
                            outlined
                            rows="7"
                            placeholder="可不填，如上述选项无法描述举报内容，可在这里补充"
                    ></v-textarea>
                </v-card-text>
                <v-divider></v-divider>
                <v-card-actions class="row-around">
                    <v-btn outlined color="secondary" class="w40r" @click="dialogVisible = false">
                        取消
                    </v-btn>
                    <v-btn :disabled="!reportType" depressed color="info" class="w40r" @click="addReport">
                        举报
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </u-row>
</template>

<script lang="ts">
  import {Vue, Component, Prop, Emit} from 'vue-property-decorator'
  import User from "@/model/User"
  import ReportType from "@/const/ReportType"
  import Enum from "@/const/Enum"
  import ReportAdd from "@/model/ReportAdd"
  import InfoType from "@/const/InfoType"

  @Component
  export default class MatchItem extends Vue {
    @Prop() user: User
    dialogVisible: boolean = false
    reportTypes: Enum[] = ReportType.reportTypes
    reportType: string = ''
    content: string = ''

    @Emit()
    change(user) {
      return user
    }

    addReport() {
      this.$info("举报成功账户会获得奖励，举报失败会被惩罚，请确认是否举报！").then(({result}) => {
        if (result) {
          const reportAdd: ReportAdd = new ReportAdd()
          reportAdd.receiveUserId = this.user.id
          reportAdd.infoType = InfoType.user
          reportAdd.type = this.reportType
          reportAdd.content = this.content
          reportAdd.infoVersionNo = 1
          this.$post('report/addReport', reportAdd)
        }
      })
    }

    reportMatchUser() {
      this.dialogVisible = true
    }
  }
</script>
